<!-- 轮播 -->
<template>
  <div class="live-card" @click="cardClick">
    <img :src="cardData.cut_img" alt="" />
    <div class="live-head">
      <div class="live-info-alt">
        <icon type="liveBanner" v-if="button.status === '直播中'"></icon>
        <div v-else class="live-info-btn" :style="{ background: button.bg }">
          {{ button.status }}
        </div>
        <span v-if="getAlt()">{{ getAlt() }}</span>
      </div>
    </div>
    <div class="live-footer">
      <div class="live-info">
        <div class="live-title">{{ cardData.title }}</div>
        <div class="live-host">{{ cardData.host }}</div>
      </div>
      <actionButton :info="button" @change="actionClick"></actionButton>
    </div>
  </div>
</template>

<script>
import icon from '../Icon.vue';
import actionButton from './Button.vue';
import query from '@/lib/query.js';
export default {
  name: 'BannerCard',
  components: { icon, actionButton },
  props: {
    cardData: {
      type: Object,
      default: () => ({}),
    },
    liveAuth: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    title({ cardData }) {
      try {
        const { title } = cardData;
        const titleList = title.split('，');
        return {
          title: titleList[0],
          subtitle: titleList[1],
        };
      } catch (error) {
        return {};
      }
    },
    button({ cardData }) {
      let status;
      let color;
      let action;
      let bg;
      const livingColor = '#FF2436';
      const activeColor = '#FF9500';
      const banColor = '#3366FF';
      const allowd = '#FFFFFF';
      const nowAllowd = '#000000';
      switch (String(cardData.status)) {
      case '1': {
        status = '直播中';
        bg = livingColor;
        action = '看直播';
        color = allowd;
        break;
      }
      case '2': {
        status = '已结束';
        bg = activeColor;
        action = '';
        color = allowd;
        break;
      }
      case '3': {
        status = '已结束';
        bg = activeColor;
        action = '看回放';
        color = allowd;
        break;
      }
      case '4': {
        status = '预告';
        bg = banColor;
        action = '已预约';
        color = nowAllowd;
        break;
      }
      case '5': {
        status = '预告';
        bg = banColor;
        action = '待开播';
        color = nowAllowd;
        break;
      }
      case '6':
      default: {
        status = '预告';
        bg = banColor;
        action = '预约';
        color = allowd;
        break;
      }
      }
      const param = {
        status,
        color,
        action,
        bg,
      };
      return param;
    },
  },
  data() {
    return {
      swiperList: [],
    };
  },
  methods: {
    actionClick() {
      if (this.button.action === '预约') {
        if (this.liveAuth) {
          window.statConf.click('live.yuyue');
        } else {
          window.statConf.click('live_presale.yuyue');
        }
        this.bookLive();
      } else if (
        this.button.action === '看回放' ||
        this.button.action === '看直播' ||
        this.button.action === '待开播'
      ) {
        if (this.liveAuth) {
          window.statConf.click('live.click');
        } else {
          window.statConf.click('live_presale.click');
        }
        _t.jumpBy2804(this.cardData.link);
      } else {
        // donothing
      }
    },
    bookLive() {
      const param = {
        live_id: this.cardData.live_id,
      };
      query
        .bookLive(param)
        .then(res => {
          if (res.data && res.data === 'BOOK_SUCCESS') {
            // 状态更新由查询完成
            this.$emit('book', '');
            const msg = this.cardData.start_time
              ? `开播时间为：${this.formatTime(this.cardData.start_time)}，`
              : '';
            const content = `预约成功，${msg}请留意app通知。`;
            this.$dialog({
              content,
              title: '',
              btns: [
                {
                  text: '我知道了',
                  highlight: false,
                },
              ],
            });
          } else {
            this.$toast('订阅直播失败，请稍后重试');
          }
        })
        .catch(err => {
          this.$toast('订阅直播失败，请稍后重试');
          this.catchErrHandler(err);
        });
    },
    // 根据状态展示直播热度或直播时间
    getAlt() {
      const status = String(this.cardData.status);
      const end = ['2', '3', '4', '5', '6'];
      try {
        if (end.indexOf(status) > -1) {
          return this.formatTime(this.cardData.start_time);
        } else {
          return '';
        }
      } catch (error) {
        return '';
      }
    },
    formatTime(str) {
      const start = 5;
      const length = 11;
      return str.substr(start, length);
    },
    cardClick() {
      if (this.liveAuth) {
        window.statConf.click('live.click');
      } else {
        window.statConf.click('live_presale.click');
      }
      _t.jumpBy2804(this.cardData.link);
    },
  },
};
</script>

<style lang="less" scoped>
.live-card {
  position: relative;
  width: 4.8rem;
  height: 2.7rem;
  border-radius: 0.12rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -1;
  }
}
.live-head {
  height: 0.32rem;
  display: flex;
  padding-top: 0.12rem;
  padding-left: 0.12rem;
  .live-info-btn {
    height: 0.32rem;
    line-height: 0.32rem;
    background: #3366ff;
    border-radius: 0.04rem;
    padding: 0 0.08rem 0;
    font-size: 0.22rem;
    color: #ffffff;
  }
  .live-info-alt {
    height: 0.32rem;
    background: rgba(0, 0, 0, 0.52);
    border-radius: 0.04rem;
    font-size: 0.24rem;
    line-height: 0.32rem;
    color: #ffffff;
    display: flex;
    span {
      padding: 0 0.08rem;
    }
  }
}

.live-footer {
  display: flex;
  height: 0.94rem;
  backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, 0.08);
  padding: 0.12rem 0.2rem;
  border-radius: 0 0 0.12rem 0.12rem;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  .live-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 3.18rem;
    .live-title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 3.18rem;
      height: 0.36rem;
      font-size: 0.28rem;
      color: #ffffff;
      line-height: 0.36rem;
      font-weight: 500;
    }
    .live-host {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 3.18rem;
      margin-top: 0.02rem;
      height: 0.32rem;
      font-size: 0.24rem;
      color: rgba(255, 255, 255, 0.84);
      line-height: 0.32rem;
    }
  }
}
</style>
